<template>
  <div class="LoginForm">
    <div class="title">超计算科技联盟</div>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="account">
          <el-input type="text" v-model="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            show-password
            type="password"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="remember">
          <el-checkbox v-model="ruleForm.remember">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('ruleForm')"
            >提&nbsp;&nbsp;&nbsp;交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginForm",
  data() {
    var validateAccount = (_, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePassword = (_, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      ruleForm: {
        account: "",
        password: "",
        remember: false,
      },
      rules: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.account === "admin" && this.ruleForm.password) {
            this.$router.push("/");
          } else {
            alert("error");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.LoginForm {
  background-color: #3a78cd;
  height: 100%;
  .title {
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 35px;
  }
  .el-checkbox__label {
    color: #fff;
  }
  .el-checkbox__inner {
    transform: scale(1.2);
    background-color: #3a78cd;
  }
  .el-form-item {
    height: 55px;
    position: relative;
    line-height: 55px;
    i {
      height: 55px;
      line-height: 55px;
    }
  }

  .demo-ruleForm {
    width: 90%;
    color: #000;
  }
  .el-form-item__label {
    color: #fff;
    height: 55px;
    position: absolute;
    letter-spacing: 8px;
    text-align: center;
    z-index: 9;
    left: 75px;
    line-height: 55px;
  }
  .el-input__inner {
    height: 55px;
    padding-left: 70px;
    line-height: 55px;
    border: none;
    color: #fff;
    background-color: #75a2db;
  }
  .el-button {
    margin-top: 40px;
    background-color: #2a57aa;
    border: none;
    height: 60px;
    padding: 0;
    line-height: 60px;
    font-size: 20px;
    width: 375px;
    // i {
    //   height: 60px;
    //   line-height: 60px;
    // }
    // span {
    //   height: 60px;
    //   line-height: 60px;
    // }
  }
}
</style>